<template>
  <div>
    <h1>欢迎查看控制详情</h1>
    <div class="box-container">
      <div class="box">
        <p>当前项目数量</p>
        <p>{{ currentProjects }}</p>
      </div>
      <div class="box">
        <p>我的项目数量</p>
        <p>{{ myProjects }}</p>
      </div>
      <div class="box">
        <p>我的代办任务数量</p>
        <p>{{ pendingTasks }}</p>
      </div>
      <div class="box">
        <p>我已完成的任务数量</p>
        <p>{{ completedTasks }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref,onMounted } from 'vue';
import projectRequest from "@/api/project.js";
// 定义数据
let curUserId = ref(null);
let currentProjects = ref(0);
let myProjects = ref(0);
let pendingTasks = ref(0);
let completedTasks = ref(0);
// 初始化数据
initializeData();

function loadProjects(){
    projectRequest.getProjectNum(1,res=>{
      currentProjects.value = res.code;
    });
    projectRequest.getMyProjectNum(curUserId,res=>{
      myProjects.value = res.code;
    })
}

function initializeData() {
  // 示例数据填充
  currentProjects.value = 10;
  myProjects.value = 5;
  pendingTasks.value = 20;
  completedTasks.value = 15;
  
  // 如果有后端API，这里应该调用API来获取真实数据
}

// 在声明周期的onmounted函数中调用loadUsers函数
onMounted(() => {
  curUserId.value = localStorage.getItem("userId");
    loadProjects();
    // 从localStorage中获取用户编号

    if (!curUserId.value) {
        // 如果userId不存在，则设置默认值或提示用户登录
        // 例如设置默认值为1：
        curUserId.value = '1';
        // 或者进入登录页面
        // router.push("/");
    }
})

</script>

<style scoped>
.box-container {
  display: flex;
  justify-content: space-around;
  margin-top: 20px; /* 可以调整以改变与标题的距离 */
}

.box {
  width: 200px; /* 盒子宽度可以根据需要调整 */
  height: 100px; /* 盒子高度可以根据需要调整 */
  border: 1px solid #ccc;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}

.box p:first-child {
  font-weight: bold;
}
</style>